<template>
  <!-- 商品列表子组件 -->
  <div class="product-list">
    <img :src="item.coverImg" />
    <div class="text">
      <h5>{{ item.shopName }}</h5>
      <h6>{{ item.shopIntroduction | shopIntrFilter }}</h6>
      <span>￥{{ item.originalPrice.toFixed(2) }}</span>
    </div>
    <!-- 商品数量加减子组件 -->
    <!-- <div class="add">
        <cart-control :item="item"></cart-control>
        </div> -->
    <!-- 商品加减 -->
    <div class="add">
      <div class="cartControl">
        <div
          class="cart-minus"
          v-show="item.count > 0"
          @click="minusCount(item, 'minus')"
        ></div>
        <div class="cart-count" v-show="item.count > 0">
          {{item.count}}
          <!-- {{ this.selectedFood.count }} -->
        </div>
        <div class="cart-add" @click="addCount(item, 'add')"></div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入购物车数量加减子组件
// import CartControl from "../components/CartControl.vue";

// 引入 vuex 中的数据，判断 减号和数量是否显示
import { mapState } from "vuex";

export default {
  name: "ProductItem",
  // data() {
  //   return {
  //     count: 0
  //   };
  // },
  props: {
    item: Object,
    i:Number,
  },
  // components: { CartControl },

  // 定义过滤器
  filters: {
    shopIntrFilter(oldVal) {
      if (oldVal.length > 22) {
        return oldVal.slice(0, 22) + "...";
      }
    },
  },
  methods: {
    minusCount(data, type) {
      this.item.count--;
      //调用 vuex 中的方法
      this.$store.dispatch("setTotal", {
        type,
        shopId: Number(data.shopId),
        price: Number(data.originalPrice),
      });
      this.$store.dispatch("setCart", {
        type,
        shopId: Number(data.shopId),
        img: data.coverImg,
        price: data.originalPrice,
        scId: data.scId,
        slogan: data.shopIntroduction,
        name: data.shopName,
      });
      // console.log(this.selectedFood);
    },
    addCount(data, type) {
      this.item.count++;
      //调用 vuex 中的方法
      this.$store.dispatch("setTotal", {
        type,
        shopId: Number(data.shopId),
        price: Number(data.originalPrice),
      });
      this.$store.dispatch("setCart", {
        type,
        shopId: Number(data.shopId),
        img: data.coverImg,
        price: data.originalPrice,
        scId: data.scId,
        slogan: data.shopIntroduction,
        name: data.shopName,
      });
      // console.log(this.selectedFood);
    },
  },
  computed: {
    // 将商品总数量放入 computed 属性中
    ...mapState(["totalCount", "selectedFood"]),
  },
  created() {
    // console.log(this.item.count);
    // console.log(this.i);
  },
};
</script>


<style scoped>
/* 右侧商品部分 */
.product-list {
  float: right;
  position: relative;
  /* background-color: greenyellow; */
  padding: 5px;
  height: 90px;
  border-left: 1px solid #e6e6e6;
  /* border-bottom: 1px solid #e6e6e6; */
  width: 75%;
  margin: 2px 0;
}
.product-list img {
  height: 80px;
  width: 80px;
  background-color: #fff;
}
.product-list .text {
  height: 80px;
  position: absolute;
  left: 95px;
  top: 5px;
  font-family: "Avenir, Helvetica, Arial, sans-serif";
}
.product-list .text h5 {
  /* font-weight: 700; */
  font-size: 17px;
}
.product-list .text h6 {
  font-size: 12px;
  margin-top: 5px;
  color: #868686;
}
.product-list .text span {
  font-size: 10px;
  color: #ff4d4d;
  font-family: "Microsoft YaHei";
  position: absolute;
  bottom: 5px;
}
.product-list .add {
  position: absolute;
  right: 12px;
  bottom: 10px;
}

/* 加减按钮 */
.cartControl {
  width: 60px;
  height: 20px;
  padding: 2px;
}
.cart-minus,
.cart-add {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}
.cart-minus {
  background: url(/xrzp/imgs/minus.svg) #ff8c01 no-repeat center;
  background-size: 12px 12px;
  float: left;
}
.cart-add {
  background: url(/xrzp/imgs/add.svg) #ff8c01 no-repeat center;
  background-size: 12px 12px;
  float: right;
}
.cart-count {
  float: left;
  width: 24px;
  height: 16px;
  font-size: 14px;
  font-family: "Microsoft YaHei";
  line-height: 16px;
  text-align: center;
}
</style>



